<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>聊天室</title>
    <link rel="stylesheet" href="css/index.css" />
  </head>
  <body>
    <div class="login_box" style="display: none;">
      <h3>用户登录</h3>
      <p>用户名</p>
      <input type="text" placeholder="请输入用户名" />
      <p>选择头像</p>
      <ul class="avatar" id="login_avatar">
        <li><img src="images/avatar01.jpg" alt="" /></li>
        <li><img src="images/avatar02.jpg" alt="" /></li>
        <li><img src="images/avatar03.jpg" alt="" /></li>
        <li><img src="images/avatar04.jpg" alt="" /></li>
        <li><img src="images/avatar05.jpg" alt="" /></li>
        <li><img src="images/avatar06.jpg" alt="" /></li>
        <li><img src="images/avatar07.jpg" alt="" /></li>
        <li><img src="images/avatar08.jpg" alt="" /></li>
        <li><img src="images/avatar09.jpg" alt="" /></li>
        <li><img src="images/avatar10.jpg" alt="" /></li>
      </ul>
      <button class="weui-btn" id="loginBtn">登录</button>
    </div>
    <div class="container" style="display: block;">
      <!-- 用户列表 -->
      <div class="user-list">
        <div class="header">
          <div class="avatar">
            <img class="img" src="images/avatar2.jpg" alt="" />
          </div>
          <div class="info"><h3 class="username">清流</h3></div>
        </div>
        <div class="title"><h3>用户列表</h3></div>
        <ul>
          <li class="user">
            <div class="avatar"><img src="images/avatar.jpg" alt="" /></div>
            <div class="name">刘小骗</div>
          </li>
          <li class="user">
            <div class="avatar"><img src="images/avatar2.jpg" alt="" /></div>
            <div class="name">胡清流</div>
          </li>
        </ul>
      </div>
      <!-- 聊天主窗口 -->
      <div class="box">
        <!-- 聊天窗口头部 -->
        <div class="box-hd"><h3>聊天室(99)</h3></div>

        <!-- 聊天窗口主体区域 -->
        <div class="box-bd">
          <div class="system">
            <p class="message_system">
              <span class="content">"往事随风"邀请你和"Boy"加入了群聊</span>
            </p>
          </div>
          <!-- 自己的消息 -->
          <div class="message-box">
            <div class="my message">
              <img class="avatar" src="images/avatar2.jpg" alt="" />
              <div class="content">
                <div class="bubble">
                  <!---->
                  <div class="bubble_cont">在干嘛</div>
                </div>
              </div>
            </div>
          </div>
          <!-- 别人的消息 -->
          <div class="message-box">
            <div class="other message">
              <img class="avatar" src="images/avatar02.jpg" alt="" />
              <div class="content">
                <div class="nickname">小美</div>
                <div class="bubble">
                  <!---->
                  <div class="bubble_cont">吃饭</div>
                </div>
              </div>
            </div>
          </div>
          <div class="system">
            <p class="message_system">
              <span class="content">小王离开了聊天室</span>
            </p>
          </div>
          <!-- 自己的消息 -->
          <div class="message-box">
            <div class="my message">
              <img class="avatar" src="images/avatar2.jpg" alt="" />
              <div class="content">
                <div class="bubble">
                  <!---->
                  <div class="bubble_cont">吃啥</div>
                </div>
              </div>
            </div>
          </div>
          <!-- 别人的消息 -->
          <div class="message-box">
            <div class="other message">
              <img class="avatar" src="images/avatar02.jpg" alt="" />
              <div class="content">
                <div class="nickname">小美</div>
                <div class="bubble">
                  <!---->
                  <div class="bubble_cont">饭</div>
                </div>
              </div>
            </div>
          </div>
          <!-- 自己的消息 -->
          <div class="message-box">
            <div class="my message">
              <img class="avatar" src="images/avatar2.jpg" alt="" />
              <div class="content">
                <div class="bubble">
                  <!---->
                  <div class="bubble_cont">哦</div>
                </div>
              </div>
            </div>
          </div>
          <!-- 别人的消息 -->
          <div class="message-box">
            <div class="other message">
              <img class="avatar" src="images/avatar02.jpg" alt="" />
              <div class="content">
                <div class="nickname">小美</div>
                <div class="bubble">
                  <!---->
                  <div class="bubble_cont">嗯</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 聊天窗口底部区域 -->
        <div class="box-ft">
          <!-- 工具栏 -->
          <div class="toolbar">
            <a href="javascript:;" title="表情" class="face"></a>
            <a href="javascript:;" title="截屏" class="screen-cut">
            </a>
            <a href="javascript:;" title="图片" class="file">
              <label for="file"></label>
              <input type="file" id="file" style="display: none;">
            </a>
          </div>
          <!-- 内容输入区域 -->
          <div class="content">
            <textarea class="text" id="content" contenteditable></textarea>
          </div>
          <!-- 发送按钮 -->
          <div class="action">
            <span class="desc">按下Ctrl+Enter发送</span>
            <a class="btn-send" id="btn-send" href="javascript:;">发送</a>
          </div>
        </div>
      </div>
      </div>
    </div>
  </body>
</html>
